<template>
  <div>
    <ul>
        <li>
            <van-icon name="arrow-left" size="20"/>
        </li>
        <li>
            <p>欢迎登录cdf海南免税</p>
            <h6>未注册的手机号验证后自动创建cdf海南免税账户</h6>
        </li>
        <li>
            <van-cell-group>
            <van-field v-model="value"  placeholder="请输入手机号" @input="reg"/>
            </van-cell-group>
        </li>
        <li>
            <van-field
            v-model="sms"
            center
            clearable
            placeholder="请输入短信验证码"
            @input="reginp"
            >
            <template #button>
                <van-button :disabled="flag" type="primary" size="small" @click="clickBtn">发送验证码</van-button>
            </template>
            </van-field>
        </li>
        <li>
            <van-button :disabled="loginbtn" type="primary" size="large" @click="go">登录</van-button>
        </li>
    </ul>
  </div>
</template>

<script>
import service from '@/utils/service';
export default {
    data(){
        return {
            value:"", //手机号码
            sms:"", //验证码
            flag:true, //按钮禁用
            loginbtn:true, //登录禁用
            getsms:""
        }
    },
    methods:{
        reg(){
            let tell = this.value + ''
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            if(reg.test(tell)){
                    service({
                    url:"http://118.178.238.19:3001/api/user/docheckphone",
                    data:{
                        tel:tell
                    },
                    method:'post'
                }).then((res) => {
                    if(res.data.code == 200){
                        this.flag = false
                    }
                })
            } 
        },
        clickBtn(){
            let tell = this.value + ''
            service({
                url:"http://118.178.238.19:3001/api/user/dosendmsgcode",
                data:{
                    tel:tell
                },
                method:'post'
            }).then((res) =>{
                this.getsms = res.data.data
                console.log(this.getsms)
            })
        },
        reginp(){
            console.log(this.getsms)
            if(this.sms == this.getsms){
                this.loginbtn = false
            }
        },
        go(){
            this.$router.push('/user')
        },
        
    }
}
</script>

<style scoped>
ul {
    background: #fafafa;
}
li {
    margin: 25px 0;
}
li:nth-child(1) {
    height: 45px;
    line-height: 45px;
    margin-top: 0;
}
li:nth-child(2) {
    height: 120px;
    color: #333;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
li:nth-child(2) h6 {
    font-size: 12px;
    color: #999;
}
</style>